<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap</title>
  <link href="../lib/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { padding-top: 70px; }
  </style>
</head>
<body>
<div class="container">
  <h1>默认样式的导航条</h1>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <!--屏幕缩小右上角导航-->
        <button type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1"
                aria-expanded="false">
          <!--屏幕缩小右上角-->
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link </a></li>
          <!--dropdown点击下拉菜单-->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle"
               data-toggle="dropdown"
               role="button"
               aria-haspopup="true"
               aria-expanded="false">
              Dropdown
              <!--dropdown点击下拉菜单 三角-->
              <span class="caret"></span>
            </a>
            <!--dropdown点击下拉菜单 内容-->
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left">
          <!--搜索框-->
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <!--submit-->
          <button type="submit" class="btn btn-success">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <h1>品牌图标</h1>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a href="#" class="navbar-brand">
          <img src="../images/home-icon15.png" alt="Brand">
        </a>
      </div>
    </div>
  </nav>
  <h1>表单</h1>
  <div class="row">
    <form class="navbar-form navbar-left" role="search">
      <nav class="navbar navbar-default">
        <div class="navbar-header">
          <button type="button"
                  class="navbar-toggle collapsed"
                  data-toggle="collapse"
                  data-target="#bs"
                  aria-expanded="false">
            <!--屏幕缩小右上角-->
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="bs">
          <div class="nav navbar-nav">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn-default btn">Submit</button>
          </div>
        </div>
      </nav>
    </form>
  </div>
  <h1>按钮</h1>
  <div class="row">
    <nav class="nav navbar-default">
      <div class="navbar-header">
        <button type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#aa"
                aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="aa">
        <div class="nav navbar-nav">
          <button type="button" class="btn btn-default navbar-btn">Sign in</button>
        </div>
      </div>
    </nav>
  </div>
  <h1>文本</h1>
  <div class="row">
    <nav class="nav navbar-default">
      <div class="navbar-header">
        <button type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#aaa"
                aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="aaa">
        <div class="nav navbar-nav">
          <p class="navbar-text">Signed in as Mark Otto</p>
        </div>
      </div>
    </nav>
  </div>
  <h1>非导航的链接</h1>
  <h4>通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐</h4>
  <div class="row">
    <div class="nav navbar-default">
      <div class="navbar-header">
        <button type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#bbb"
                aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="bbb">
        <div class="nav navbar-nav">
          <p class="navbar-text navbar-right">
            .......
            <a href="#" class="navbar-link">Mark Otto</a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <h1>固定在顶部.navbar-fixed-top</h1>
  <div class="row">
    <nav class="nav navbar-default navbar-fixed-top">
      <div class="navbar-header">
        <button type="button"
                class="collapsed navbar-toggle"
                data-toggle="collapse"
                data-target="#aaaa"
                aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="aaaa">
        <div class="nav navbar-brand">
          ...
        </div>
      </div>
    </nav>
  </div>
  <h1>静止在顶部.navbar-static-top</h1>
  <div class="row">
    <nav class="nav navbar-default navbar-static-top">
      <div class="navbar-header">
        <button type="button"
                class="collapsed navbar-toggle"
                data-toggle="collapse"
                data-target="#bbbb"
                aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="bbbb">
        <div class="nav navbar-brand">
          ...
        </div>
      </div>
    </nav>
  </div>
  <h1>反色的导航条.navbar-inverse</h1>
  <div class="row">
    <nav class="nav navbar-default navbar-inverse">
      <div class="navbar-header">
        <button type="button"
                class="collapsed navbar-toggle"
                data-toggle="collapse"
                data-target="#cccc"
                aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="cccc">
        <div class="nav navbar-brand">
          <span>111</span>
          <span>111</span>
          <span>111</span>
        </div>
      </div>
    </nav>
  </div>
  <h1>路径导航</h1>
  <ol class="list-inline">
    <li><a href="#">111</a></li>
    <li><a href="#">111</a></li>
    <li class="active">222</li>
  </ol>
  <br><br><br><br><br>
</div>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/bootstrap.min.js"></script>
</body>
</html>